<template>
  <div class="carts">
    <van-checkbox-group
      v-model="ids"
      checked-color="var(--theme-color)"
      icon-size="16px"
      @change="handleChange"
      ref="checkboxGroup"
      v-if="carts.length > 0"
    >
      <div class="cart-item" v-for="item in carts" :key="item.id">
        <van-checkbox :name="item.id" />
        <div class="right">
          <div class="item-shop">
            <span class="shop-name">{{ item.shopName }}</span>
            <span class="shop-service">免运费</span>
          </div>
          <div
            class="item-info"
            @click="$router.push(`/detail/${item.goods.iid}/${item.goods.id}`)"
          >
            <img :src="item.goods.show.img" />
            <div class="item-info-right">
              <span class="title">{{ item.goods.title }}</span>
              <div class="item-handler">
                <span class="price">{{ item.goods.price | priceFilter }}</span>
                <div class="edit">
                  <i
                    class="iconfont icon-jian"
                    @click="handleDecrement(item.id)"
                  ></i>
                  <span class="num">
                    {{ item.num }}
                  </span>
                  <i
                    class="iconfont icon-jia"
                    @click="handleIncrement(item.id)"
                  ></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="height: 60px; background: var(--gray-shallow)"></div>
    </van-checkbox-group>

    <van-empty v-else style="margin-top: 100px">
      <span slot="description" style="font-size: 12px">
        购物车没有商品，赶紧去选购吧
      </span>
    </van-empty>
  </div>
</template>

<script>
export default {
  props: {
    carts: Array
  },
  data: () => ({
    ids: []
  }),
  methods: {
    handleDecrement(id) {
      this.$emit('decrement', id)
    },
    handleIncrement(id) {
      this.$emit('increment', id)
    },
    // 更新父组件的ids
    handleChange(names) {
      this.$emit('input', [...names])
    },
    // 全选和反选
    toggleAll(checked) {
      const { checkboxGroup } = this.$refs
      checkboxGroup.toggleAll(checked)
    }
  },
  filters: {
    priceFilter: (price) => '￥' + price.toFixed(2)
  }
}
</script>
<style lang="less" scoped>
.cart-item {
  background: white;
  border-radius: 10px;
  margin-bottom: 10px;
  padding: 10px 15px;
  font-size: 12px;
  display: flex;
}

.right {
  margin-left: 15px;
  flex: 1;
  .item-shop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 35px;
    .shop-name {
      font-weight: 700;
    }
    .shop-service {
      font-size: 9px;
      color: var(--gray-moderate);
    }
  }
  .item-info {
    display: flex;
    align-items: center;
    img {
      width: 70px;
      height: 70px;
    }
    .item-info-right {
      flex: 1;
      padding-left: 15px;
      .title {
        word-break: break-all;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 20px;
      }
      .item-handler {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;
        .price {
          color: #ff4c19;
        }
        .edit {
          display: flex;
          align-items: center;
          .num {
            width: 30px;
            background: var(--gray-shallow);
            text-align: center;
            line-height: 20px;
            margin: 0 5px;
          }
        }
      }
    }
  }
}
</style>
